<template>
  <div class="all">
    <!-- 订单结算台 -->
    <van-nav-bar
      title="订单结算台"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 配送地址 -->
    <div class="address">
      <div class="left">
        <van-icon name="location-o" style="margin-right:5px"/>
        <p v-if="!userDefaultAddress">请选择配送地址</p>
        <div v-else>
          <p>{{ userDefaultAddress.name }} {{ userDefaultAddress.phone }} </p>
          <p>{{ userProvince.province }} {{ userProvince.city }} {{ userProvince.region }}</p>
        </div>
      </div>
      <div class="right"><van-icon name="arrow" @click="$router.push('/address')"/></div>
    </div>
    <!-- 商品详情 -->
    <pay-goods-item-base v-for="(item, index) in goodsList.goodsList" :key="index" :item="item"></pay-goods-item-base>
    <!-- 商品统计 -->
    <div class="Statistic">
      <p>共{{ goodsList.orderTotalNum }}件商品,合计:<span style="color:red">￥{{ goodsList.orderTotalPrice }}</span></p>
    </div>
    <!-- 总金额，优惠券，配送费 -->
    <div class="public" style="margin-top:10px">
      <p>订单总金额</p>
      <span>￥{{ goodsList.orderTotalPrice }}</span>
    </div>
    <div class="public">
      <p>优惠券</p>
      <span>无</span>
    </div>
    <div class="public">
      <p>配送费用</p>
      <span>请先选择配送地址</span>
    </div>
    <!-- 支付方式 -->
    <div class="public" style="margin-top:10px"><h3>支付方式</h3></div>
    <div class="public">
      <div class="left">
        <van-icon name="paid" />余额支付(可用￥{{ userInfo.balance }}元)
      </div>
      <div class="right">
        <van-icon name="success" />
      </div>
    </div>
    <!-- 选填 -->
    <div class="optional">
      选填:<input type="text" placeholder="买家留言(50字以内)">
    </div>
    <!-- 底部固定导航 -->
    <div class="footer">
      <p style="padding-left:10px">实付款:<span style="color:red">￥{{ goodsList.orderTotalPrice }}</span></p>
      <button @click=submit>提交订单</button>
    </div>
  </div>
</template>

<script>
import PayGoodsItemBase from '@/components/PayGoodsItemBase.vue'
import { getUserAddress, getDefaultAddressId } from '@/api/address'
import { submitOrder, submit } from '@/api/submitOrder.js'
export default {
  data () {
    return {
      userDefaultAddress: [], // 用户默认地址
      userProvince: [], // 用户居住省份城市市区
      userDefaultAddressId: '', // 用户默认地址id
      goodsList: {}, // 用户选中的商品列表信息
      userInfo: {} // 用户自身信息
    }
  },
  async created () {
    // 获取用户默认地址
    await this.getUserDefaultAddress()
    // console.log(this.userDefaultAddress)

    // 获取用户选中的商品的信息
    await this.getUserCheckedGoods()
  },
  components: {
    PayGoodsItemBase
  },
  methods: {
    // 获取用户默认地址
    async getUserDefaultAddress () {
      // 获取用户所有地址
      const allAddress = await getUserAddress()
      // console.log(allAddress.data.list)
      // 获取用户默认地址
      const defaultId = await getDefaultAddressId()
      this.userDefaultAddressId = defaultId
      // console.log(defaultId.data.defaultId)
      // 找出用户的默认地址并存储
      this.userDefaultAddress = allAddress.data.list.find(item => item.address_id === defaultId.data.defaultId)
      this.userProvince = this.userDefaultAddress.region
    },
    // 获取用户选中的商品的信息
    async getUserCheckedGoods () {
      const mode = this.$route.query.mode
      // 立即购买
      if (mode === 'buyNow') {
        const { data: { order, personal } } = await submitOrder(mode, {
          goodsId: this.$route.query.goodsId,
          goodsNum: this.$route.query.goodsNum,
          goodsSkuId: this.$route.query.goodsSkuId
        })
        this.goodsList = order
        this.userInfo = personal
      } else {
        // 购物车跳转过来
        const cartIds = this.$route.query.cartIds
        const { data: { order, personal } } = await submitOrder(mode, {
          cartIds
        })
        this.goodsList = order
        this.userInfo = personal
        // console.log(this.userInfo)
      }
    },
    // 提交订单
    async submit () {
      const mode = this.$route.query.mode
      if (mode === 'buyNow') {
        const result = await submit(mode, {
          goodsId: this.$route.query.goodsId,
          goodsNum: this.$route.query.goodsNum,
          goodsSkuId: this.$route.query.goodsSkuId
        })
        console.log(result)
      }
      if (mode === 'cart') {
        const cartIds = this.$route.query.cartIds
        const result = await submit(mode, {
          cartIds
        })
        console.log(result)
      }
      this.$toast('支付成功')
      this.$router.replace('/orderManage')
    }
  }
}
</script>

<style scoped>
.all {
  height:650px;
  background:rgb(243, 238, 238);
}
.public {
  display:flex;
  justify-content:space-between;
  padding:10px;
  background:white;
  border-bottom:1px solid rgb(205, 95, 113, 0.5)
}
/* 配送地址 */
.address {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  border-bottom:1px solid rgb(205, 95, 113, 0.5);
  background:white;
}
.address .left {
  display:flex;
  align-items:center;
}
/* 商品统计 */
.Statistic {
  padding:3px 10px;
  background: white;
  line-height:30px;
  display:flex;
  flex-direction:row-reverse;
}
/* 选填 */
.optional {
  display:flex;
  padding:10px;
  margin-top:10px;
  background:white;
  align-items:center;
}
.optional input {
  flex:1;
  border:none;
}
/* 底部固定导航 */
.footer {
  width:100%;
  height:40px;
  display:flex;
  justify-content:space-between;
  background:white;
  position:fixed;
  bottom:0;
  line-height:40px;
}
.footer button {
  width:100px;
  background:red;
  color:white;
  border:none;
}
</style>
